import dengImg from '../../../assets/teaching/dengfangdajing.svg';
import closeImg from '../../../assets/teaching/closefangdajing.svg';

export default function JyMagnifier(setting) {
  const winoffwidth = window.innerWidth;
  const winoffheight = window.innerHeight;

  let magnifierDiv;
  let menuDiv;
  let coorDiv;
  let coorzxDiv;
  let coorzsDiv;
  let coorysDiv;
  let magnifierCtx;
  let menuCtx;
  const magnifierDivStyle =
    setting.magnifierDivStyle || 'border:1px solid #ccc;background:#fff;box-shadow:5px 5px 25px #000;';
  let magnifierCanvas;
  let menuCanvas;

  let width = setting.width || 150;
  let height = setting.height || 150;
  let ratio = setting.ratio || 3;
  const radius = typeof setting.radius === 'undefined' ? width / 2 : setting.radius;
  const sightType = setting.sightType || 'rect';
  const sightSize = typeof setting.sightSize === 'undefined' ? 5 : setting.sightSize;
  const sightColor = setting.sightColor || '#FF0000';
  const { targetCanvasId } = setting;

  const targetCanvas = document.getElementById(targetCanvasId);
  let widthOffset = (width * ratio) / 2 - width / 2;
  let heightOffset = (height * ratio) / 2 - height / 2;
  let magnifierShow = false;
  let menuShow = false;

  // let offsetX = width / 2 + 10;
  // let offsetY = height / 2 + 10;
  let offsetX = winoffwidth / 2;
  let offsetY = winoffheight / 2;

  let hackCanvas;
  let hackCtx;
  function _draw() {
    hackCtx.clearRect(0, 0, hackCanvas.width, hackCanvas.height);
    // hackCtx.drawImage(targetCanvas, width / 2, height / 2, targetCanvas.width, targetCanvas.height);
    hackCtx.drawImage(targetCanvas, width / 2, height / 2, winoffwidth, winoffheight);
    magnifierCtx.clearRect(0, 0, magnifierCanvas.width, magnifierCanvas.height);
    magnifierCtx.drawImage(
      hackCanvas,
      offsetX,
      offsetY,
      width,
      height,
      -widthOffset,
      -heightOffset,
      width * ratio,
      height * ratio,
    );
    if (sightType) {
      if (sightType === 'rect') {
        if (sightSize > 0) {
          magnifierCtx.fillStyle = sightColor;
          magnifierCtx.fillRect(width / 2 - sightSize / 2, height / 2 - sightSize / 2, sightSize, sightSize);
        }
      } else if (sightType === 'cross') {
        magnifierCtx.beginPath();
        magnifierCtx.strokeStyle = sightColor;
        magnifierCtx.moveTo(0, height / 2);
        magnifierCtx.lineTo(width, height / 2);
        magnifierCtx.stroke();

        magnifierCtx.beginPath();
        magnifierCtx.strokeStyle = sightColor;
        magnifierCtx.moveTo(width / 2, 0);
        magnifierCtx.lineTo(width / 2, height);
        magnifierCtx.stroke();
      }
    }
  }
  function _show(mshow) {
    magnifierShow = mshow;
    menuShow = mshow;
    magnifierDiv.style.display = magnifierShow ? '' : 'none';
    menuDiv.style.display = menuShow ? '' : 'none';
    // show(false)时把已有div清空,否则$box.offset().left获取的是display:none的元素,0
    if (!mshow) {
      magnifierDiv.remove();
      menuDiv.remove();
    }
  }
  function _setRatio(mRatio) {
    ratio = mRatio;
    widthOffset = (width * ratio) / 2 - width / 2;
    heightOffset = (height * ratio) / 2 - height / 2;
    _draw();
  }
  // 创建一个canvas
  function _createCanvas(width, height, background = '#ffffff') {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    canvas.className = 'magnifyingGlassAndSpotlight';
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    canvas.style.background = background;
    return canvas;
  }
  function _menu() {
    menuDiv = document.createElement('div');
    menuDiv.setAttribute('style', 'z-index:1990;position:absolute;display:none;cursor:pointer;width:64px;height:32px;');
    menuDiv.setAttribute('id', 'menuId');
    // menuDiv.style.top = `${targetCanvas.offsetTop + 316}px`;
    // menuDiv.style.left = `${targetCanvas.offsetLeft + 326}px`;
    menuDiv.style.left = `calc(50vw + ${width / 2 - 60}px)`;
    menuDiv.style.top = `calc(50vh + ${height / 2 + 6}px)`;
    document.body.appendChild(menuDiv);
    // 放大镜矩形下面操作按钮的canvas
    menuCanvas = _createCanvas(64, 32, '#FC8B09');
    menuDiv.appendChild(menuCanvas);
    menuCtx = menuCanvas.getContext('2d');
    const imgObj1 = new Image();
    imgObj1.src = dengImg;
    // 待图片加载完后，将其显示在canvas上
    imgObj1.onload = () => {
      /* 9个参数 */
      /* 图片对象 */
      /* 图片上定位的坐标  x y */
      /* 在图片上截取多大的区域  w h */
      /* 绘制在画布上的坐标 x y */
      /* 是图片的大小  不是裁剪  是缩放 */
      menuCtx.drawImage(imgObj1, 0, 0, 17, 18, 10, 7, 17, 18);
    };

    const imgObj2 = new Image();
    imgObj2.src = closeImg;
    // 待图片加载完后，将其显示在canvas上
    imgObj2.onload = () => {
      menuCtx.drawImage(imgObj2, 0, 0, 16, 16, 39, 10, 16, 16);
    };
  }
  function _coor() {
    coorDiv = document.createElement('div');
    coorDiv.setAttribute(
      'style',
      'z-index:1990;position:absolute;display:block;cursor:se-resize;border-width:8px 0px 0px 8px;border-style:solid;border-color:#FC8B09 transparent transparent;transform: rotateZ(90deg);right:0;bottom:0;',
    );
    coorDiv.setAttribute('id', 'coorId');
    magnifierDiv.appendChild(coorDiv);
  }
  function _coorzx() {
    coorzxDiv = document.createElement('div');
    coorzxDiv.setAttribute(
      'style',
      'z-index:1990;position:absolute;display:block;cursor:ne-resize;border-width:8px 0px 0px 8px;border-style:solid;border-color:#FC8B09 transparent transparent;transform: rotateZ(-180deg);left:0;bottom:0;',
    );
    coorzxDiv.setAttribute('id', 'coorzxId');
    magnifierDiv.appendChild(coorzxDiv);
  }
  function _coorzs() {
    coorzsDiv = document.createElement('div');
    coorzsDiv.setAttribute(
      'style',
      'z-index:1990;position:absolute;display:block;cursor:nw-resize;border-width:8px 0px 0px 8px;border-style:solid;border-color:#FC8B09 transparent transparent;transform: rotateZ(-90deg);left:0;top:0;',
    );
    coorzsDiv.setAttribute('id', 'coorzsId');
    magnifierDiv.appendChild(coorzsDiv);
  }
  function _coorys() {
    coorysDiv = document.createElement('div');
    coorysDiv.setAttribute(
      'style',
      'z-index:1990;position:absolute;display:block;cursor:sw-resize;border-width:8px 0px 0px 8px;border-style:solid;border-color:#FC8B09 transparent transparent;transform: rotateZ(0deg);right:0;top:0;',
    );
    coorysDiv.setAttribute('id', 'coorysId');
    magnifierDiv.appendChild(coorysDiv);
  }
  function _init() {
    // 创建一个放大镜div
    magnifierDiv = document.createElement('div');
    magnifierDiv.setAttribute('style', `z-index:1989;position:absolute;cursor:move;display:none;${magnifierDivStyle}`);
    magnifierDiv.setAttribute('id', 'magnifierId');
    magnifierDiv.style.width = `${width}px`;
    magnifierDiv.style.height = `${height}px`;
    // magnifierDiv.style.top = `${targetCanvas.offsetTop + 10}px`;
    // magnifierDiv.style.left = `${targetCanvas.offsetLeft + 10}px`;
    magnifierDiv.style.left = `calc(50vw - ${width / 2}px)`;
    magnifierDiv.style.top = `calc(50vh - ${height / 2}px)`;
    if (radius) {
      magnifierDiv.style.borderRadius = `${radius}px`;
    }
    document.body.appendChild(magnifierDiv);

    // 放大镜矩形的canvas
    magnifierCanvas = _createCanvas(width, height);

    if (magnifierDiv.style.borderRadius) {
      magnifierCanvas.style.borderRadius = magnifierDiv.style.borderRadius;
    }
    magnifierDiv.appendChild(magnifierCanvas);
    magnifierCtx = magnifierCanvas.getContext('2d');
    // 复制的canvas
    // hackCanvas = _createCanvas(targetCanvas.width + width, targetCanvas.height + height);
    hackCanvas = _createCanvas(winoffwidth + width, winoffheight + height);

    hackCanvas.style.display = 'none';
    document.body.appendChild(hackCanvas);
    hackCtx = hackCanvas.getContext('2d');
    // 放大镜canvas上面添加可拉伸按钮 拉伸镜框大小
    _coor();
    _coorzx();
    _coorzs();
    _coorys();
    // 放大镜canvas下面创建一个关闭按钮和关灯按钮
    _menu();
    _draw();
  }
  // 镜框div拉伸
  function _setWH(width1, height1, magnifierleft, magnifiertop, w, h) {
    menuDiv.style.left = `${magnifierleft + width1 - 60}px`;
    menuDiv.style.top = `${magnifiertop + height1 + 6}px`;
    magnifierDiv.style.width = `${width1}px`;
    magnifierDiv.style.height = `${height1}px`;
    magnifierCanvas.width = width1;
    magnifierCanvas.height = height1;
    magnifierCanvas.style.width = `${width1}px`;
    magnifierCanvas.style.height = `${height1}px`;
    width = width1;
    height = height1;
    widthOffset = (width1 * ratio) / 2 - width1 / 2;
    heightOffset = (height1 * ratio) / 2 - height1 / 2;
    // _draw();
    magnifierCtx.clearRect(0, 0, magnifierCanvas.width, magnifierCanvas.height);
    // offset的值时镜框中心点的坐标 -4是因为该w包括边框的2px*2
    offsetX = (w - 4) / 2 + magnifierleft;
    offsetY = (h - 4) / 2 + magnifiertop;
    magnifierCtx.drawImage(
      hackCanvas,
      offsetX,
      offsetY,
      width,
      height,
      -widthOffset,
      -heightOffset,
      width * ratio,
      height * ratio,
    );
  }
  // event;binding;点击时div框x,y坐标;点击时鼠标x,y坐标
  function _bind(event, binding, magnifierleft, magnifiertop, cpagex, cpagey) {
    if (!magnifierShow) {
      return;
    }
    if (binding && typeof binding === 'function') {
      binding(magnifierDiv, menuDiv);
    }
    // 偏移量坐标是div中心点的坐标,根据实时鼠标坐标-点击时鼠标坐标+点击时div框坐标得到的是实时的div坐标,再加上div宽高的一半得到中心点坐标
    // offsetX = event.pageX;
    // offsetY = event.pageY;
    offsetX = (event.pageX || event.targetTouches[0].pageX) - cpagex + magnifierleft + width / 2;
    offsetY = (event.pageY || event.targetTouches[0].pageY) - cpagey + magnifiertop + height / 2;
    _draw();
  }
  // 返回dom对象到index.vue
  function _magnifierObject() {
    return magnifierDiv;
  }
  function _menuObject() {
    return menuDiv;
  }
  function _coorObject() {
    return coorDiv;
  }
  function _coorzxObject() {
    return coorzxDiv;
  }
  function _coorzsObject() {
    return coorzsDiv;
  }
  function _coorysObject() {
    return coorysDiv;
  }
  // 重置复制来的canvas
  function _resethackCanvas(w, h) {
    hackCanvas.width = winoffwidth + w;
    hackCanvas.height = winoffheight + h;
    document.body.appendChild(hackCanvas);
    hackCtx = hackCanvas.getContext('2d');
    hackCtx.clearRect(0, 0, hackCanvas.width, hackCanvas.height);
    hackCtx.drawImage(targetCanvas, width / 2, height / 2, winoffwidth, winoffheight);
  }

  _init();
  return {
    bind: _bind,
    show: _show,
    setRatio: _setRatio,
    magnifierObject: _magnifierObject,
    menuObject: _menuObject,
    coorObject: _coorObject,
    coorzxObject: _coorzxObject,
    coorzsObject: _coorzsObject,
    coorysObject: _coorysObject,
    setWH: _setWH,
    resethackCanvas: _resethackCanvas,
  };
}
